<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
      <el-form-item label="标题" prop="f2302">
        <el-input v-model="queryParams.f2302" placeholder="请输入标题" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="是否公开" prop="f2306">
        <el-select v-model="queryParams.f2306" placeholder="请输入是否公开" clearable @keyup.enter.native="handleQuery">
          <el-option label="是" :value="0"></el-option>
          <el-option label="否" :value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="发布人姓名" prop="f2307">
        <el-input v-model="queryParams.f2307" placeholder="请输入发布人姓名" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <!-- <el-form-item label="公司名称" prop="f2708">
        <el-input v-model="queryParams.f2708" placeholder="请输入公司名称" clearable @keyup.enter.native="handleQuery" />
      </el-form-item> -->
      <el-form-item style="margin-left: 50px;">
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple"
          @click="handleDelete">删除</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="T23List" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="标题" align="center" prop="f2302" />
      <el-table-column label="内容" align="center" prop="f2304" />
      <el-table-column label="发布时间" align="center" prop="F2305" />
      <el-table-column label="是否公开" align="center" prop="f2306">
        <template slot-scope="scope">
          <el-tag :type="scope.row.f2306 === 0 ? 'success' : 'danger'">{{ scope.row.f2306 === 0 ? '是' : '否'
            }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="发布人姓名" align="center" prop="f2307" />
      <el-table-column label="公司名称" align="center" prop="f2708" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

    <!-- 添加或修改系统公告对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="标题" prop="f2302">
          <el-input v-model="form.f2302" placeholder="请输入标题" />
        </el-form-item>
        <el-form-item label="内容" prop="f2304">
          <el-input v-model="form.f2304" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="是否公开" prop="f2306">
          <el-select style="width: 100%;" v-model="form.f2306" placeholder="请选择是否公开" clearable>
            <el-option label="是" :value="0"></el-option>
            <el-option label="否" :value="1"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listT23, getT23, delT23, addT23, updateT23 } from "@/api/system/T23";

export default {
    name: "T23",
    data() {
        return {
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 选中公告标题
            titles: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 系统公告表格数据
            T23List: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                f2302: null,
                f2304: null,
                f1801: null,
                f2305: null,
                f2306: null,
                f0301: null,
                f2307: null,
                f2708: null
            },
            // 表单参数
            form: {},
            // 表单校验
            rules: {
            }
        };
    },
    created() {
        this.getList();
    },
    methods: {
        /** 查询系统公告列表 */
        getList() {
            // this.loading = true;
            this.loading = false;
            listT23(this.queryParams).then(response => {
                this.T23List = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                f2301: null,
                f2302: null,
                f2304: null,
                f1801: null,
                f2305: null,
                f2306: null,
                f0301: null,
                f2307: null,
                f2708: null
            };
            this.resetForm("form");
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.f2301)
            this.titles = selection.map(item => item.f2302)
            this.single = selection.length !== 1
            this.multiple = !selection.length
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.reset();
            this.open = true;
            this.title = "添加系统公告";
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.reset();
            const F2301 = row.f2301 || this.ids
            getT23(F2301).then(response => {
                response.data.f2306 === 0 ? response.data.f2306 = "是" : response.data.f2306 = "否";
                this.form = response.data;
                this.open = true;
                this.title = "修改系统公告";
            });
        },
        /** 提交按钮 */
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    if (this.form.f2301 != null) {
                      // this.form.f2306 === "是" ? this.form.f2306 = 0 : this.form.f2306 = 1;
                        updateT23(this.form).then(response => {
                            this.$modal.msgSuccess("修改成功");
                            this.open = false;
                            this.getList();
                        });
                    } else {
                        addT23(this.form).then(response => {
                            this.$modal.msgSuccess("新增成功");
                            this.open = false;
                            this.getList();
                        });
                    }
                }
            });
        },
        /** 删除按钮操作 */
        handleDelete(row) {
          const F2301s = row.f2301 || this.ids;
          const titles = row.f2302 || this.titles;
          this.$modal.confirm('是否确认删除系统公告标题为"' + titles + '"的数据项？').then(function () {
                return delT23(F2301s);
            }).then(() => {
                this.getList();
                this.$modal.msgSuccess("删除成功");
            }).catch(() => { });
        },
        /** 导出按钮操作 */
        handleExport() {
            this.download('system/T23/export', {
                ...this.queryParams
            }, `T23_${new Date().getTime()}.xlsx`)
        }
    }
};
</script>
